<template>
  <div class="chart">
    <div style="color: white" class="background_image">
      总{{ name === 1 ? '用地面积' : '建筑面积' }}
      <span
        style="
          font-size: 24px;
          display: inline-block;
          text-align: right;
          width: 98px;
        "
        >128</span
      >
      平方公里
    </div>
    <div
      style="
        margin-top: 23px;
        color: #d2e6f0;
        text-align: right;
        font-size: 12px;
        padding-right: 10px;
        margin-bottom: 19px;
      "
    >
      单位：平方公里
    </div>
    <echart-div :options="option" :height="200" />
    <el-row style="height: 320px; margin-top: -25px">
      <echartDiv :options="options" :height="height" />
    </el-row>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'

export default {
  components: {
    echartDiv
  },
  props: {
    name: Number
  },
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: [
            '住宅用地',
            '商业用地',
            '工业用地',
            '教育科研用地',
            '公共设施用地',
            '公园绿道用地',
            '农林用地',
            '环卫水域',
            '其他用地'
          ],
          axisTick: {
            show: false
            // 去除刻度
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 51,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },
        grid: {
          left: '7%',
          right: '1%',
          top: '0%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
            // 去除刻度
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            data: [125, 101, 204, 33, 55, 80, 105, 55, 20],
            type: 'bar',
            showBackground: true,
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: '#00C8FF',
                // color: function(params) {
                //   // console.log(params, 'iparams111')
                //   var colorList = ['#00d988', '#ffffff', '#00d988', '#ffffff', '#00d988']
                //   return colorList[params.dataIndex]
                // },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (item) {
                    return item.data
                  },
                  // + '平方公里'
                  textStyle: {
                    fontSize: 12,
                    color: '#ffffff'
                    // color: function(params) {
                    //   // console.log(params,'==========')
                    //   var colorList = ['#00d988', '#ffffff', '#00d988', '#ffffff', '#00d988']
                    //   return colorList[params.dataIndex]
                    // }
                  }
                  // }
                }
              }
            },
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          }
        ]
      },
      options: {
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          // padding:[5,5],
          itemGap: 7,
          itemWidth: 7,
          itemHeight: 7,
          x: '10%',
          y: '80%',
          textStyle: {
            color: '#fff'
          },
          itemStyle: {
            borderType: 'solid'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '50%'],
            animation: false,
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              fontSize: 12,
              formatter: function (item) {
                return item.value
              }
            },
            // emphasis: {
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   }
            // },
            labelLine: {
              show: true
            },
            data: [
              {
                value: 125,
                name: '住宅用地',
                itemStyle: {
                  color: '#FEF090'
                }
              },
              {
                value: 101,
                name: '商业用地',
                itemStyle: {
                  color: '#FFAC53'
                }
              },
              {
                value: 204,
                name: '工业用地',
                itemStyle: {
                  color: '#BB5800'
                }
              },
              {
                value: 33,
                name: '教育科研用地',
                itemStyle: {
                  color: '#6662F8'
                }
              },
              {
                value: 55,
                name: '公共设施用地',
                itemStyle: {
                  color: '#00C8FF'
                }
              },
              {
                value: 80,
                name: '公园绿道用地',
                itemStyle: {
                  color: '#00FFFF '
                }
              },
              {
                value: 105,
                name: '农林用地',
                itemStyle: {
                  color: '#368EFC'
                }
              },
              {
                value: 55,
                name: '环卫水域',
                itemStyle: {
                  color: '#00D075'
                }
              },
              {
                value: 20,
                name: '其他用地',
                itemStyle: {
                  color: '#C969E1 '
                }
              }
            ]
          }
        ]
      },
      height: 300
    }
  },
  mounted() {
    // const echart = echarts.init(this.$refs.chart)
    // echart.setOption({
    //
    // })
    // window.addEventListener('resize', function() {
    //   echart.resize()
    // })
  }
}
</script>

<style lang="scss" scoped>
.size12 {
  font-size: 12px;
}

.background_image {
  height: 64px;
  line-height: 64px;
  padding-left: 16px;
  font-size: 14px;
  background-image: url('../../../../../public/img/basemaps/yjkb5.png');
}

.size16 {
  font-size: 16px;
  font-weight: 800;
  margin-left: 20px;
  margin-right: 4px;
}

.size14 {
  font-size: 14px;
  color: #d2e6f0;
}

.size8 {
  font-size: 8px;
  position: relative;
  top: -3px;
}

.left40 {
  margin-left: 40px !important;
}

.left13 {
  margin-left: 13px !important;
}

.sizeColor {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 2px;
}

.chart {
  margin-top: 14px;
}
</style>
